@use '@angular/material' as mat;
@use 'sass:color';
@use '../../../styles/constants';

@mixin theme($theme) {
  .docs-component-viewer-nav-content {
    border-right: 1px solid mat.get-theme-color($theme, outline-variant);

    &::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, .26);
    }

    a.docs-component-viewer-sidenav-item-selected {
      background: rgba(mat.get-theme-color($theme, primary), 0.15);

      .mdc-list-item__primary-text {
        color: color.adjust(
          mat.get-theme-color($theme, primary),
          $lightness: if(mat.get-theme-type($theme) == dark, 25%, 0%)
        );
      }

      &:hover {
        background: rgba(mat.get-theme-color($theme, primary), 0.25);
      }
    }
  }
}
